<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>class 与 style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .basic { width: 400px; height: 100px; border: 1px solid black; }
        .happy { border: 4px solid red; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg, yellow, pink, orange, yellow); }
        .sad { border: 4px dashed rgb(2, 197, 2); background-color: gray; }
        .normal { background-color: skyblue; }
        .atguigu1 { background-color: yellowgreen; }
        .atguigu2 { font-size: 30px; text-shadow: 2px 2px 10px red; }
        .atguigu3 { border-radius: 20px; }
    </style>
</head>
<body>
    <div id="app">
        <!-- class 字符串写法 -->
        <div :class="activeClass" class="basic" @click="changeMood">{{ name }}</div>

        <br><br>

        <!-- class 数组写法 -->
        <div :class="classArr" class="basic">
            <div>{{ name }}</div>
            <button @click="toggleClass('atguigu1')">toggle atguigu1</button>
            <button @click="toggleClass('atguigu2')">toggle atguigu2</button>
            <button @click="toggleClass('atguigu3')">toggle atguigu3</button>
        </div>

        <br><br>

        <!-- class 对象写法 -->
        <div :class="{ 'atguigu1': showAtguigu1, 'atguigu2': false, atguigu3 }" class="basic">{{ name }}</div>

        <br><br>

        <!-- style 对象写法 -->
        <div :style="{'font-size': '50px', color: 'red'}" class="basic">{{ name }}</div>

        <br><br>

        <!-- style 数组写法 -->
        <div :style="styleArr" class="basic">{{ name }}</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                name: '张三',
                activeClass: '',
                classArr: [],
                showAtguigu1: true,
                atguigu3: true,
                styleArr: [
                    { fontSize: '50px' },
                    { color: 'green' }
                ]
            },
            methods: {
                changeMood() {
                    const moodArr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * 3)
                    this.activeClass = moodArr[index]
                },
                toggleClass(value) {
                    const index = this.classArr.indexOf(value)
                    if (index !== -1) {
                        this.classArr.splice(index, 1)
                    } else {
                        this.classArr.push(value)
                    }
                }
            }
        })
    </script>
</body>
</html>